<template>

	<th class="table-view-title-row-public-data" @click="sortDataset">

        <span>{{ fieldName }}</span>

        <i class="iconfont icon-up-down" v-show="!sort && indexExist"></i>
        <i class="iconfont icon-caret-up" v-show="sort && asc"></i>
		<i class="iconfont icon-caret-down" v-show="sort && !asc"></i>

		<i  v-if="isPrivate" class="iconfont icon-point3" v-show="!indexExist" @click="showMenu"></i>

		<div class="field-type">
			<span>{{ typeMap.get(fieldType) }}</span>
		</div>

		<div class="menu-container">
			<div class="menu create-index" v-show="menuExist && isPrivate" @click.stop="createIndex">
				<span>建立索引</span>
			</div>
		</div>

	</th>

</template>

<script>

	import Bus from '../../utils/event_bus'

	const typeMap = new Map([
		['text', '文本'], ['long', '整数'], ['integer', '整数'], ['double', '小数'],
		['date', '日期'], ['boolean', '布尔型'], ['timestamp', '日期'], ['time', '时间']
	]);

	export default{

		name: 'table-view-title-row',

		props: {

            fieldName: {
                type: String
            },
			fieldType: {
				type: String
			},
			indexExist: {
				type: Boolean
			},
			resetException: {
				type: String
			},
			fieldIndex: {
				type: Number
			},
			isPrivate: {
				type: Boolean
			}

		},

		data: function() {

            return {
                sort: false,
                asc: false,
				menuExist: false,
				typeMap: typeMap
            };

		},

		created: function() {

			Bus.$on('hide-all-menu', () => {
				this.menuExist = false;
			});

		},

		watch: {

			resetException: function(value, oldValue) {
				if (this.resetException !== this.fieldName) {
					this.sort = false;
					this.asc = false;
				}
			}

		},

		methods: {

            sortDataset() {

				if (!this.indexExist) {
					return;
				}

                this.sort = true;
                this.asc = !this.asc;
                let sortType = this.asc ? 'ASC' : 'DESC';
                this.$emit('sort-by-field', {sortField: this.fieldName, sortType: sortType});
				this.$emit('reset-other-field-icon', this.fieldName);

            },

			/**
			 * 显示建立索引菜单
			 */
			showMenu(evt) {

				Bus.$emit('hide-all-menu');
				this.menuExist = true;

				// 绑定点击非设置区域，关闭设置区域事件
				document.removeEventListener('click', this.hideSettingPanel, true);
				document.addEventListener('click', this.hideSettingPanel, true);

			},

			/**
			 * 对指定字段建立索引
			 */
			createIndex() {

				Bus.$emit('create-index', this.fieldName, this.fieldIndex);

			},

			/**
			 * 隐藏设置菜单
			 */
			hideSettingPanel(evt) {

				if (this.menuExist) {
					this.menuExist = false;
				}

			}

		}

	}

</script>

<style lang="scss" scoped>

	@import "common";

    .table-view-title-row-public-data {

		white-space: nowrap;
		text-align: left;
		padding: 0 8px;

		height: 32px;
		line-height: 32px;
		white-space:nowrap;
		border: 1px solid $bdGray;

		min-width: 100px;
		max-width: 280px;

		span {
			max-width: calc(100% - 28px);
			text-overflow: ellipsis;
		}

        i {

			font-size: 10px;
            opacity: 50;
            margin-left: 5px;

            &.icon-up-down {
				color: rgba(0, 0, 0, 0.3);
            }

			&.icon-point3 {
				color: #ccc;
				float: right;
				right: 0px;
			}

			&:hover {
				color: #58B7FF;
				cursor: pointer;
			}

        }

		.field-type {
			color: #ccc;
			margin-top: -8px;
		}

		.menu-container {

			position: relative;

			.menu {
				position: absolute;
				color: #58B7FF;
				background-color: #fff;
				box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.1);
				border-radius: 3px;
				z-index: 10;
				right: -10px;
				top: -24px;
				width: 80px;
				height: 30px;
				font-size: 12px;
				text-align: center;

				&:hover {
					cursor: pointer;
				}

				span {
					line-height: 30px;
				}
			}
		}

    }

</style>
